<template>
	<view :class="'goods-list-c goods-list-c-'+set.showType" >
		<view class="goods-info" v-for="(list,key) in data"
		 @click="clickt(list.id)" :key="key">
			<view class="goods-img">
				<image  mode="aspectFill" :src="list.img"></image>
				<image mode="aspectFill" v-if="list.stock<=0" class="left-top-img"
				 :src="set.stock_icon" ></image>
				 <image mode="aspectFill" v-else-if="list.is_recommend==1" class="left-top-img" style=""
				  :src="set.recommend_icon" ></image>
			</view>
			  <view class="goods-text">
				<text class="u-line-2 goods-title">{{list.title}}</text>
				<view class="snum">已售：{{Number(list.snum)+Number(list.origin_snum)}}</view>
				<view class="price-info">
					<text class="left-price" :style="'color: '+set.app_color" v-if="list.shop_price>0">￥{{list.shop_price}}</text>
					<text class="left-price" v-else :style="'color: '+set.app_color">免费</text>
					<image :src="set.cart_icon" mode="aspectFill"></image>
				</view>
			  </view>
		</view>
		
	</view>

</template>

<script>
	export default {
	
		name:"diy-goods",
		data() {
			return {
				data:[]
			};
		}, watch:{
            goodsList:{
                handler(newVal){
                 this.data = newVal;
                }
            }
        },props:{
			 set:{
				type:Object,
			 	default(){
					return {
					      showType:2,
						  app_color:"red",
						  cart_icon:'https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/tabbar/tab_1_cur_tab.png',
						  recommend_icon:"https://moxifile.oss-cn-beijing.aliyuncs.com/images/icon/tuijian.png",
						  stock_icon:"https://moxifile.oss-cn-beijing.aliyuncs.com/images/icon/shouqing.png",
						  goods:[]
					}
				}
			 },
			 goodsList:{
				type:Array,
				default(){
						return []
					}
				},
			hasMore:{
				type:Boolean,
				default(){
					return true
				} 
			}
		},methods:{
			clickt(id){
				this.navto('page_mall/goods/info?id='+id);
			}
		},created() {
			if(this.set.goods.length){
				let self = this;
				this.moxiPost('/plugin/mall/index/goods/goods_list',{goods_id:this.set.goods},function(data){
					self.data = data.data;
				},false)
			}else{
				this.data = this.goodsList;
			}
		}
	}
</script>

<style>
.goods-list-c{display: flex;flex-wrap: wrap;
	flex-direction: row;justify-content: space-between;overflow-y: auto;}
	
	.goods-list-c .goods-info{background-color: #ffffff;margin: 12rpx;
	display: flex;flex-direction: column;border-radius: 4px;flex: 0 0 350rpx;
	overflow: hidden;box-shadow: 0 0 5px #cccccc;}
	.goods-list-c .goods-title{color: #333333;font-size: 14px;height: 35px;;}
	.goods-img{position: relative;}
	.goods-list-c .goods-img{width: 350rpx;height: 350rpx;}
	.goods-list-c .goods-img image{width: 100%;height: 100%}
	.goods-list-c .goods-text{
		display: flex;flex-direction: column;padding: 5px;
	}
	.goods-list-c .snum{font-size: 12px;color: #ccc;margin: 10px 0;}
	.goods-list-c .price-info{display: flex;flex-direction: row;justify-content: space-between;}
	.goods-list-c .price-info .left-price{font-weight: 600;color: red;}
	.goods-list-c .price-info image{width: 25px;height: 25px;}
	
	.goods-list-c-2{display: flex;flex-direction: column;
	width: 750rpx;
	height: 100%;;}
	.goods-list-c-2 .goods-info{width: 710rpx;
	display: flex;flex-direction: row;background-color: #fff;border-radius: 4px;
	box-shadow: 0 0 6px #ccc;justify-content: space-between;flex: 1 0 auto;
	margin:12rpx 16rpx;height: 240rpx;}
	.goods-list-c-2 .goods-img{width: 240rpx;height: 240rpx;display: no;}
	.goods-list-c-2 .goods-img image{width: 240rpx;height: 240rpx;;margin-right: 10px;
	border-top-left-radius:4px;border-bottom-left-radius:4px }
	.goods-list-c-2 .goods-text{width: 470rpx;display: flex;flex-direction: column;height: 240rpx;
	justify-content: space-between;}
	.goods-list-c-2 .goods-title{font-size: 14px;color: #333333;margin: 5px 0;;}
	.goods-list-c-2 .snum{color: #ccc;font-size: 12px;}
	.goods-list-c-2 .price-info{display: flex;flex-direction: row;justify-content: space-between;margin: 5px 0;}
	.goods-list-c-2 .left-price{font-weight: 600;color: red}
	.goods-list-c-2 .price-info image{width: 25px;height: 25px;margin-right: 5px;}
	.left-top-img{max-width: 45px;max-height: 45px;position: absolute;left: 0;top: 0;z-index: 10;}
</style>